<template>
  <div class="wrap">
    <div
      v-show="isShow && html"
      ref="overflowTip"
      :class="`panel-label-overflow-tooltip ${componentStyle}`"
      :style="style"
    >
      {{ html }}
    </div>
  </div>
</template>
<script>

const getTextEle = (el, searchEle = 'span') => {
  const { children } = el;
  if (children.length > 0 && el.querySelector('.el-tooltip')) {
    return el;
  }
  if (children.length > 0) {
    return getTextEle(el.querySelector(searchEle));
  }
  return el;
};
const getSelfComp = binding => {
  const { parentComp } = binding.value;
  const tooltipVm = parentComp.$refs.panelLabelOverflowTooltip;
  return tooltipVm;
};
const bindFun = (el, binding) => {
  const self = getSelfComp(binding);
  self.parentComp = binding.value.parentComp;

  el.onmouseover = e => {
    const { target } = e;

    // 帮助信息图标
    const { className } = target;
    if (className === 'el-icon-info-filled') {
      self.isShow = false;
      return;
    }

    const labelEle = target.classList.contains('el-form-item__label') ? target : target.closest('.el-form-item__label');
    if (!labelEle) {
      self.isShow = false;
      return;
    }
    const textEle = getTextEle(labelEle);
    if (!textEle) {
      self.isShow = false;
      return;
    }

    const text = textEle.innerText; // 浮窗文字
    self.html = text;
    self.isShow = true;
    self.x = e.clientX;
    self.y = e.clientY;
    document.body.appendChild(self.$refs.overflowTip); // 移动到body层，防止被el-dialog弹窗遮挡
  };
  el.onmouseleave = e => {
    self.isShow = false;
    self.html = '';
    self.$el.appendChild(self.$refs.overflowTip); // 移动到本来位置，防止销毁前dom残留
  };
};

export default {
  name: 'PanelLabelOverflowTooltip',
  components: {},
  props: {
    componentStyle: {
      type: String,
      default: 'light',
    },
  },
  data() {
    return {
      config: {},
      isShow: false,
      html: '',
      x: 0,
      y: 0,
    };
  },
  computed: {
    style() {
      return {
        position: 'fixed',
        zIndex: 10000,
        left: `${this.x}px`,
        top: `${this.y}px`,
      };
    },
  },
  methods: {
  },
};
</script>
<style lang="less">
.panel-label-overflow-tooltip {
  max-width: 400px;
  max-height: 400px;
  overflow: auto;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  font-size: 14px;
}
</style>
